<template>
  <div
    class="background"
    style="background-color: #f1f4f6"
    v-loading="loading"
    element-loading-text="登录中"
  >
    <HeaderTemplate> </HeaderTemplate>
    <FromBox>
      <template v-slot:title>
        <div v-show="resetPassword" class="from-title">
          <span>旅行社</span>
          <span>密码重置</span>
        </div>
        <div v-show="!resetPassword" class="from-title">
          <span>旅行社</span>
          <span>账号登录</span>
        </div>
      </template>

      <!-- 验证表单 -->
      <template v-slot:LoginFrom>
        <div class="loginform">
          <input
            class="input"
            v-model="loginForm.phone"
            @blur="changePhone"
            type="text"
            placeholder="手机号"
          />

          <div id="resetpass" v-if="resetPassword">
            <input class="input" type="text" placeholder="验证码" />
            <span @click="resetCode">获取验证码</span>
          </div>

          <!-- 密码 -->
          <div v-if="!resetPassword" class="passwbox">
            <input
              class="input"
              :type="passw"
              v-model="loginForm.password"
              @blur="onBlur"
              placeholder="密码"
              @keyup.enter="login"
            />
            <span
              class="passw_icon"
              :class="icon"
              @click.stop="showPass"
            ></span>
          </div>

          <!-- 重设密码 -->
          <div v-if="resetPassword" class="passwbox">
            <input
              class="input"
              :type="passw"
              v-model="loginForm.password"
              @blur="onBlur"
              placeholder="重设密码"
              @keyup.enter="resetCode"
            />
            <span
              class="passw_icon"
              :class="icon"
              @click.stop="showPass"
            ></span>
          </div>

          <!-- 按钮层 -->
          <span v-if="!resetPassword" class="loginBtn" @click.stop="login"
            >登录</span
          >

          <!-- 重置密码提交 -->
          <span v-if="resetPassword" class="loginBtn" @click.stop="resetCode"
            >重置密码</span
          >
        </div>
      </template>

      <template v-slot:bottom-title>
        <div v-show="!resetPassword" class="btn-a">
          <router-link class="registe" to="/register">新注册</router-link> |
          <span class="reset" to="/register" @click="resetPassword = true"
            >忘记密码</span
          >
        </div>
        <div v-show="resetPassword" class="btn-a">
          <span class="registe" @click="resetPassword = false">返回登录</span>
        </div>
      </template>
    </FromBox>

    <BottomTemplate />
  </div>
</template>

<script>
import "@/global-style/style.less";
import HeaderTemplate from "@/components/HeaderTemplate";
import FromBox from "@/components/FromBox.vue";
import BottomTemplate from "@/components/BottomTemplate.vue";
import mixin from "@/mixins/register_mixin.js";
// resetPassword, resetPasswordcode
import { subBtn_mit, resetPasswordcode } from "@/utils/method.js";
import { mapActions } from "vuex";

export default {
  components: { FromBox, HeaderTemplate, BottomTemplate },
  mixins: [mixin],
  data() {
    return {
      resetPassword: false,
      loading: false,
      passw: "password",
      icon: "el-input__icon el-icon-view",
      ischecked: false,
      password: false,
      loginForm: {
        phone: "",
        password: "",
      },
    };
  },
  methods: {
    // 登录
    login() {
      if (this.loginForm.phone == "") {
        this.$message.error("请输入手机号");
      } else if (this.loginForm.password == "") {
        this.$message.error("请输入密码");
      } else {
        this.loading = true;
        subBtn_mit(this.loginForm)
          .then((res) => {
            // 存储电话号码
            window.localStorage.setItem("userphone", this.loginForm.phone);
            this.loading = false;
            this.$store.dispatch("setuserInfo", {
              data: this.loginForm,
              token: res.data.data.token,
            });
            //跳转到申请入驻页
            this.$router.replace({ name: "UserEnter" });
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    // 重置密码
    resetCode() {
      resetPasswordcode(this.loginForm.phone)
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    ...mapActions(["setuserInfo"]),
  },
};
</script>

<style lang='less' scoped>
.loginform {
  div#resetpass {
    position: relative;
    & > input {
      border-radius: 0;
    }
    span {
      position: absolute;
      cursor: pointer;
      right: 10px;
      top: 50%;
      // height: 100%;
      line-height: 5vh;
      color: #07c160;
      transform: translatey(-50%);
      font-size: 13px;
    }
  }
  input.input:first-of-type,
  input.input:nth-child(2) {
    margin-bottom: 0px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  div.passwbox {
    position: relative;
    & > input.input {
      border-top: none;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      margin-bottom: 0px;
      margin-bottom: 40px;
    }
    span.passw_icon {
      height: 40px;
      position: absolute;
      top: 0px;
      right: 20px;
      cursor: pointer;
    }
  }
}
.reset,
.registe {
  cursor: pointer;
}
</style>